<template>
	<div>
		<el-table :data="collectlist" border>
			<el-table-column label="#" type="index"></el-table-column>
			<el-table-column label="标题" prop="title"></el-table-column>
			<el-table-column label="类别" prop="category"></el-table-column>
			<el-table-column label="视频">
				<template v-slot="scope">
					<el-image @click="toplay(scope.row.video_url)" style="width: 100px; height: 100px" :src="baseUrl+scope.row.image_url" ></el-image>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<!-- 功能按钮 -->
				<template v-slot="scope">
					<el-button type="danger" icon="el-icon-delete" @click="deleteDialog(scope.row.id)">删</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[1, 10, 50, 100]"
		 :page-size="page_size" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<el-dialog title="删" :visible.sync="deleteDialogVisible" width="30%">
			<span>确定移除收藏吗？</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="deleteDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="deletecollect()">确 定</el-button>
			</span>
		</el-dialog>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: "http://127.0.0.1/thinkphp/public/uploads/",
				collectlist: [],
				page_size: 100,
				page: 1,
				token: window.sessionStorage.getItem("token"),
				total: 0,
				deleteDialogVisible: false,
				u_id: "",
				deleteId: "",

			}
		},
		created() {
			this.getcollect();
		},
		methods: {
			getcollect() {
				let url = 'collectlist/'+this.token+"/" + this.page + '/' + this.page_size;
				// console.log(url);
				this.$http.get(url).then(res => {
					this.collectlist = res.data.data;
					// console.log(this.collectlist);
					this.total = res.data.total;
				})
			},
			handleCurrentChange(current) {
				this.page = current;
				this.getcollect();
			},
			handleSizeChange(size) {
				this.page_size = size;
				this.getcollect();
			},
			deleteDialog(id) {
				this.deleteDialogVisible = true;
				this.deleteId = id;
			},
			deletecollect() {
				this.deleteDialogVisible = false;
				let url = 'deletecollect/' + this.token + "/" + this.deleteId;
				console.log(url);
				this.$http.get(url).then(res => {
					// console.log(res.data);
					if (res.data.status == 2000) {
						this.$message.success("删除成功");
						this.getcollect();
					} else {
						this.$message.error("删除失败");
					}
				})
			},
			toplay(url) {
				this.$router.push({
					path: "/user/play",
					name: "userplay",
					params: {
						"video_url": url,
					}
				});
			},
		}
	}
</script>

<style>
</style>
